<template>
    <div class="container">
        <logo-card action="用户登录" />
        <el-form ref="loginFormRef" label-position="left" style="max-width: 600px" :model="loginForm" status-icon
            :rules="rules" label-width="auto" class="demo-loginForm">
            <el-form-item label="账号" prop="userAccount">
                <el-input v-model.number="loginForm.userAccount" />
            </el-form-item>
            <el-form-item label="密码" prop="userPassword" >
                <el-input v-model="loginForm.userPassword" type="password" autocomplete="off" />
            </el-form-item>
            <div style="margin-bottom: 10px;">
                <div style="width: 110px ; font-size: 12px; display:flex; align-items: center; margin-left: auto;">
                    <span>还没有账号？</span><el-link style="font-size: 12px;" type="primary" href="/user/register">去注册</el-link>
                </div>
            </div>
            
                
            <el-form-item>
                <div style="width: 100%; display: flex;justify-content: center;">
                    <el-button type="primary" @click="submitForm(loginFormRef)">
                        登录
                    </el-button>
                    <el-button @click="resetForm(loginFormRef)">清空</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>

</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, ElStep, type FormInstance, type FormRules } from 'element-plus'
import LogoCard from '@/components/LogoCard.vue'
import axiosInstance from '@/utils/request'
import { useRouter } from 'vue-router'
const router = useRouter()
const loginFormRef = ref<FormInstance>()

const checkAccount = (rule: any, value: string, callback: any) => {
    if (!value || value.trim().length == 0) {
        return callback(new Error('请输入账号！'))
    }
    const regex = /^[a-zA-Z0-9!@#$%^&*(),.?":{}|<>-]{3,10}$/
    const trimVal = value.trim()
    if (!regex.test(trimVal)) {
        return callback(new Error('该账号不存在！'))
    }
    callback()
}


const loginForm = reactive({
    userAccount: '',
    userPassword: ''
})
const user = reactive({
    "id": "",
    "userName": "",
    "userAvatar": "",
    "userProfile": "",
    "userRole": "",
    "createTime": "",
    "updateTime": ""
  })

const rules = reactive<FormRules<typeof loginForm>>({
    userAccount: [{ validator: checkAccount, trigger: 'blur' }]
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    console.log(formEl)
    formEl.validate(async (valid) => {
        if (valid  ) {
            const res = await axiosInstance.post('/user/login',{'userAccount': loginForm.userAccount,'userPassword': loginForm.userPassword})
            console.log(res)
            if(res){
                localStorage.setItem('loginUser',JSON.stringify(res))
                ElMessage({type: 'success',message: '登录成功！'})
            }else{
                ElMessage.error('登录失败!')
            }
        } else {
            console.log('error submit!')
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>
<style scoped>
.container{
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.el-form {
    margin: 20px;
}

.el-form-item {
    margin-bottom: 20px;
}

.button-box {
    display: flex;
    justify-content: center;
}

/* 给按钮添加一些间距 */
.el-button {
    margin: 0 5px;
}
</style>
